<template>
  <div class="author-works-wrapper">
    <div class="author-works-title">
      <item-list :items="categoriesCover"
      :idx="categoryIdx"
      @changeIdx="changeCategory"
      class="category-list"></item-list>
      <search-bar class="author-works-search"  v-model:searchValue="searchValue"></search-bar>
    </div>
    
    <article-list class="article-list"
    :articles="filteredArticles" @fetchArticleAbstracts="fetchArticleAbstracts"></article-list>
  </div>
</template>

<script>
import SearchBar from '@c/utils/SearchBar.vue'
import ArticleList from '@/components/ArticleList.vue';
import ItemList from '@c/utils/ItemList.vue'

export default {
  components: {
    SearchBar,
    ArticleList,
    ItemList,
  },
  data() {
    return {
      categories: ['works'],
      categoriesCover: ['作品'],
      searching: false,
      searchValue: '',

      works: [],
      worksPage: 0
    }
  },
  computed: {
    categoryIdx() {
      return this.categories.includes(this.$route.query.q)
        ? this.categories.indexOf(this.$route.query.q)
        : 0;
    },
    articles() {
      if(this.categoryIdx === 0) {
        return this.works;
      } else {
        return this.works;
      }
    },
    filteredArticles() {
      return this.articles.filter(article => {
        return article.title.includes(this.searchValue) || article.digest.includes(this.searchValue);
      })
    }
  },
  methods: {
    changeCategory(idx) {
      this.$router.push({
        path: this.$route.path,
        query: {
          q: this.categories[idx]
        }
      })
    },
    fetchArticleAbstracts() {
      switch(this.categoryIdx) {
        case 0: this.fetchWorksArticleAbstracts(); break;
      }
    },
    fetchWorksArticleAbstracts() {
      this.$fetch({
        name: 'author article',
        url: '/author/article',
        method: 'POST',
        data: {
          author_id: parseInt(this.$route.params.author_id),
          page: ++this.worksPage,
          sort: 2,
        }
      }).then(res => {
        if(res.data.success) {
          if(res.data.object.length) this.works = this.works.concat(res.data.object);
          else this.worksPage--;
        } else {
          this.worksPage--;
        }
      }).catch(error => {
        this.$alert({
          type: 'error',
          content: '获取作者文章作品信息失败'
        });
        this.worksPage--;
      })
    }
  },
  mounted () {
  },
}
</script>

<style scoped lang="less">
@w: var(--innerWidthPart1);
@th: calc(var(--innerWidthPart1) * 0.065);

.author-works-wrapper {
  width: @w;

  .author-works-title {
    position: relative;
    box-sizing: border-box;
    width: @w;
    height: @th;
    padding: 0 calc(@w / 50);
    border-bottom: 1px solid var(--gray);

    .category-list {
      float: left;
      --itemListWidth: calc(@w * 0.6);
      --itemListHeight: calc(@th);
      --itemNum: 5;
    }

    .author-works-search {
      float: right;
      --searchBarWidth: calc(@w * 0.2);
      --searchBarHeight: @th;
      --searchBarFontSize: calc(@th / 4);
      --searchBarInnerHeight: calc(@th * 0.6);
      --backgroundColor: white;

      &:focus-within {
        --searchBarWidth: calc(@w * 0.35);
      }
    }
  }

  .article-list {
    --articleListWidth: @w;
  }
}
</style>